<template>
  <div style="width: 100%;">
   <div style="background-color: #F2F7FB;width: 100%;padding-top: 20px;margin-left: 20px">
     <el-header align="left" style="margin-top: 60px"> |  医生管理</el-header>
     <el-form align="left" style="margin-left: 20px">
       <el-form-item label="">
<!--         所属机构<el-select v-model="form.iid" placeholder="请选择">-->
<!--         <el-option v-for="item in jg" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
<!--         &lt;!&ndash; 这里可以根据实际情况添加机构选项 &ndash;&gt;-->
<!--       </el-select>-->
<!--         &lt;!&ndash;      </el-form-item>&ndash;&gt;-->
<!--         &lt;!&ndash;      <el-form-item label="">&ndash;&gt;-->
<!--         所属团队<el-select v-model="form.tid" placeholder="请选择">-->
<!--         <el-option v-for="item in team" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
<!--         -->
<!--         &lt;!&ndash; 这里可以根据实际情况添加团队选项 &ndash;&gt;-->
<!--       </el-select>-->
         <!--      </el-form-item>-->
         <!--      <el-form-item label="">-->
<!--         医生标签<el-select v-model="form.bq" placeholder="请选择">-->
<!--         &lt;!&ndash; 这里可以根据实际情况添加标签选项 &ndash;&gt;-->
<!--       </el-select>-->

       </el-form-item>
       <el-form-item>
         <el-input v-model="form.name" placeholder="请输入关键字搜索" style="width: 200px;"></el-input>
         <el-button type="primary" @click="searchDoctors" style="width:100px;margin-left: 20px">搜索</el-button><span style="margin-left: 30px" align="right">
         <el-button type="primary" @click="addDoctor"  style="width: 140px;">新增医生信息</el-button>
         <el-button type="" @click="dc" style="width: 100px;">导出</el-button>
       </span>
       </el-form-item>
     </el-form>

     <el-main style="background-color: #F2F7FB">
       <el-table
           width="100%"
           :data="doctorsData"
           stripe>
         <el-table-column
             prop="id"
             label="项目编号">
         </el-table-column>
         <el-table-column
             label="头像">
           <template slot-scope="scope">
             <img :src="scope.row.img" width="50px">
           </template>
         </el-table-column>
         <!--      <el-table-column-->
         <!--          label="次数">-->
         <!--        <template slot-scope="scope">-->
         <!--          {{ scope.row.num }} 次-->
         <!--        </template>-->
         <!--      </el-table-column>-->
         <el-table-column
             prop="name"
             label="姓名">
         </el-table-column>
         <el-table-column
             prop="phone"
             label="联系电话">
         </el-table-column>
         <el-table-column
             prop="role"
             label="角色">
         </el-table-column>
         <el-table-column
             prop="tid"
             label="所属团队">
         </el-table-column>
         <el-table-column
             prop="iid"
             label="所属机构">
         </el-table-column>
         <el-table-column align="center" prop="residentStatus" label="居民状态" width="150">
           <template slot-scope="scope" >
             <!--                 @change="updateStatus(scope.row)"-->
             <el-switch
                 v-model="scope.row.status"
                 active-color="#13ce66"
                 inactive-color=""
                 :active-value="1"
                 :inactive-value="0"
                 @change="ztupdate(scope.row)"
             ></el-switch>
             <span v-if="scope.row.status" class="switch-text">启用</span>
             <span v-else class="switch-text2">禁用</span>
           </template>
         </el-table-column>
         <el-table-column
             label="操作">
           <template slot-scope="scope">
             <el-button style="width: 50px;" type="text" @click="viewDetails(scope.row)">查看详情</el-button>
             <el-button style="width: 50px;" type="text" @click="sendMessage(scope.row)">发消息</el-button>
             <el-button style="width: 50px;" type="text" @click="editDoctor(scope.row)">编辑</el-button>
             <el-button style="width: 50px;" type="text" @click="deleteDoctor(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-main>
   </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form:{},
      total:0,
      doctorForm:{},
      current:1,
      pageSize:5,
      selectedInstitution: null,
      selectedTeam: null,
      selectedTag: null,
      searchKeyword: '',
      doctorsData: [
        // 可以添加更多医生数据
      ]
    };
  },
  methods: {
    ztupdate(row){
      this.axios.post(`http://localhost:8302/doctor/ztupdate`,row).then(res=>{
        this.searchDoctors();
         this.$message({
           type: 'success',
           message: res.data.data
         })
      })
    },
    // updateStatus(row){
    //   if (row.status){
    //     row.status=0
    //   }else{
    //     row.status=1
    //   }
    //   this.doctorForm=row
    //   this.axios.post(`http://localhost:8302/doctor/save`,this.doctorForm).then(res=>{
    //     this.doctorForm={}
    //     this.$message({
    //       type: 'success',
    //       message: '保存成功!'
    //     });
    //   })
    // },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.findAll()
    },
    addDoctor() {
      // 实现新增医生信息的逻辑
      this.$router.push('/saveOrUpdateDoctor')
    },
    dc(){
      location.href = 'http://localhost:8302/doctor/dc';
    },
    viewDetails(doctor) {
      // 实现查看详情的逻辑
      localStorage.setItem("doctor", JSON.stringify(doctor))
      this.$router.push('/doctorxq');
    },
    sendMessage(doctor) {
      // 实现发消息的逻辑
    },
    editDoctor(doctor) {
      // 实现编辑医生信息的逻辑
      localStorage.setItem("doctor", JSON.stringify(doctor))
      this.$router.push('/saveOrUpdateDoctor');
    },
    deleteDoctor(doctor) {
      // 实现删除医生信息的逻辑
      // this.$confirm('此操作将永久删除该数据，是否继续？', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
        // 这里是用户点击确定后执行的代码，例如发送删除请求到后端
        doctor.del=0
        this.axios.post(`http://localhost:8302/doctor/save`,doctor).then(res=>{
          this.searchDoctors();
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      // })
    },
    searchDoctors() {
      // 实现搜索逻辑
      this.axios.post(`http://localhost:8302/doctor/findAll?current=${this.current}&pageSize=${this.pageSize}`,this.form).then(res=>{
        this.doctorsData = res.data.data.records;
        this.total = res.data.data.total;
      })
    }
  },
  created() {
    // 初始化数据
    this.searchDoctors();
  }

};
</script>
<style>
.switch-text {
  position: absolute;
  left: 58px;
  top: 53%;
  transform: translateY(-50%);
  color: white;
  font-size: 9px;
}

.switch-text2 {
  position: absolute;
  left: 73px;
  top: 52%;
  transform: translateY(-50%);
  color: black;
  font-size: 9px;
}
</style>
